<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图</title>
<script src="../js/jsconfigrem.js"></script>
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" href="../css/cssreset.css"/>
<link rel="stylesheet" href="css/map.css"/>
<script src="../js/swiper-3.4.1.min.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<style>

</style>
</head>
<body style="padding-bottom:70px;background:#efefef;">
    <div class="app-wrap">
        <!-- 公有头部标题  -->
        <div class="head-title">
            <div class="imgbox back-arrow">
                <a href="../index.html" class="block">
                    <img src="../publice_img/back-arrow.png" alt="">
                </a>
            </div>
            <p class="txt">地图</p>
        </div>
        <!-- 公有头部标题  -->
        <div class="tabs"> 
            <a href="#" class="active">新闻</a>
            <a href="#" >社会</a>
            <a href="#">军事</a>
        </div>
        <div id="tabs-container" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content-slide map-content">
                        <!-- <h1>loading</h1> -->
                        <div class="map-info">
                            <p class="text-c title">显示你的百度位置<p/>
                            <p class="text-c time"><span>17:54</span><span class="time-status">PM</span></p>
                            <hr class="hr">
                            <div class="icon-section cl">
                                <div class="left">
                                    <div class="imgbox">
                                        <img src="images/night.png" alt="">
                                    </div>
                                </div>
                                <div class="right">8/9</div>
                            </div>   
                        </div>
                        <div class="map-img">
                            <img src="images/map.png" alt="">
                        </div>

                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content-slide">
                        <h2>loading</h2>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content-slide">
                        <h1>loading</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="nomore-endsection">
            <div class="imgbox">
                <img src="../publice_img/nomore.png" alt="">
            </div>
            <p>没有更多啦!~~</p>
        </div> -->
        <!-- 底部导航
        <!-- <div class="bottom-wrap">
            <ul class="bottom-nav row text-c">
                <li class="col25"><a href="" class="block"><div class="imgbox"><img src="../publice_img/btm-icon01.png" alt=""></div>首页</a></li>
                <li class="col25"><a href="payfor/payme.html" class="block"><div class="imgbox"><img src="../publice_img/btm-icon03.png" alt=""></div>施舍</a></li>
                <li class="col25"><a href="map/map.html" class="block"><div class="imgbox"><img src="../publice_img/btm-icon02.png" alt=""></div>地图</a></li>
                <li class="col25"><a href="payfor/payme.html" class="block"><div class="imgbox"><img src="../publice_img/btm-icon03.png" alt=""></div>收买</a></li>
            </ul>
        </div> -->

    </div>
</body>
<script>
    
window.onload = function() {





  var tabsSwiper = new Swiper('#tabs-container',{
    speed:500,
    onSlideChangeStart: function(){
      $(".tabs .active").removeClass('active')
      $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')  
    }
  })
  $(".tabs a").on('touchstart mousedown',function(e){
    e.preventDefault()
    $(".tabs .active").removeClass('active')
    $(this).addClass('active')
    tabsSwiper.slideTo( $(this).index() )
  })
  $(".tabs a").click(function(e){
    e.preventDefault()
  })
  
}
</script>

</html>